import React, {useState} from 'react';
import {StyleSheet, ScrollView, TouchableHighlight, TouchableOpacity} from 'react-native';
import {
  Colors,
  ListItem,
  Text,
  View,
  Image,
  BorderRadiuses,
  Assets,
  Spacings,
  Typography,
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';


Assets.loadAssetsGroup('list_demo', {
  avatar1: require('../../assets/icons/check.png'),
  avatar2: require('../../assets/icons/search.png'),
});

interface ListItemTesterProps {
  label: string;
  listItems: React.ReactNode[];
  showLogs?: boolean;
  eventLogs?: {[key: string]: number};
}


const ListItemTester = ({
  label,
  listItems,
  showLogs = false,
  eventLogs = {},
}: ListItemTesterProps) => {
  return (
    <View style={styles.testerContainer}>
      <Text text70 grey10 marginB-10 style={styles.sectionTitle}>
        {label}
      </Text>
      
      {showLogs && Object.keys(eventLogs).length > 0 && (
        <View style={styles.logContainer}>
          <Text text90 blue30>
            Log: {Object.entries(eventLogs).map(([k, v]) => `${k}(${v})`).join(', ')}
          </Text>
        </View>
      )}

      <View style={styles.listContainer}>
        {listItems.map((item, index) => (
          <View key={index} style={styles.listItemWrapper}>
             {index > 0 && <View style={styles.separator} />}
             <Text text100 grey40 marginB-5>Example {index + 1}:</Text>
             {item}
          </View>
        ))}
      </View>
    </View>
  );
};

export default function ListItemDemo() {
  const [eventLogs, setEventLogs] = useState<{[key: string]: number}>({});

  const addLog = (eventName: string) => {
    setEventLogs(prev => ({
      ...prev,
      [eventName]: (prev[eventName] || 0) + 1
    }));
  };

  return (
    <ScrollView contentContainerStyle={styles.scrollContent}>
      <TestSuite name="ListItem & ListItem.Part">
        <TestCase itShould="height: 设置固定高度 (70 vs 100)">
          <ListItemTester
            label="Height Comparison"
            listItems={[
              <ListItem
                height={70} // 高度 70
                activeBackgroundColor={Colors.grey70}
                activeOpacity={0.3}
                containerStyle={styles.border}
                onPress={() => console.log('h70')}
              >
                 <ListItem.Part left>
                    <Image source={Assets.list_demo.avatar1} style={styles.image} />
                 </ListItem.Part>
                 <ListItem.Part middle>
                    <Text text70>Height: 70</Text>
                 </ListItem.Part>
              </ListItem>,
              <ListItem
                height={100} // 高度 100
                activeBackgroundColor={Colors.grey70}
                activeOpacity={0.3}
                containerStyle={styles.border}
                onPress={() => console.log('h100')}
              >
                 <ListItem.Part left>
                    <Image source={Assets.list_demo.avatar2} style={styles.imageLarge} />
                 </ListItem.Part>
                 <ListItem.Part middle column>
                    <Text text60>Height: 100</Text>
                    <Text text90 grey40>Taller item allows more content</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="underlayColor: 按下时的背景颜色 (Red vs Blue)">
          <ListItemTester
            label="Press to see Underlay Color"
            listItems={[
              <ListItem
                activeBackgroundColor={Colors.red70} // 红色按下背景
                activeOpacity={1} // 不透明，完全显示背景色
                height={70}
                containerStyle={styles.border}
                onPress={() => {}}
                underlayColor={Colors.red70} // iOS 兼容
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70 red10>Red Underlay (Press Me)</Text>
                 </ListItem.Part>
              </ListItem>,
              <ListItem
                activeBackgroundColor={Colors.blue70} // 蓝色按下背景
                activeOpacity={1}
                height={70}
                containerStyle={styles.border}
                onPress={() => {}}
                underlayColor={Colors.blue70}
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70 blue10>Blue Underlay (Press Me)</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="onPress & onLongPress: 交互回调 (查看日志)">
          <ListItemTester
            label="Interaction Events"
            showLogs={true}
            eventLogs={eventLogs}
            listItems={[
              <ListItem
                height={70}
                containerStyle={styles.border}
                onPress={() => addLog('Press_Item_1')}
                onLongPress={() => addLog('LongPress_Item_1')}
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70>Tap or Long Press Me</Text>
                 </ListItem.Part>
              </ListItem>,
              <ListItem
                height={70}
                containerStyle={styles.border}
                onPress={() => addLog('Press_Item_2')}
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70>Tap Only (No Long Press)</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="containerStyle: 顶部容器样式 (Background/Border)">
          <ListItemTester
            label="Container Styling"
            listItems={[
              <ListItem
                height={70}
                containerStyle={[styles.border, { backgroundColor: Colors.orange70 }]} // 橙色背景
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70 white>Orange Background</Text>
                 </ListItem.Part>
              </ListItem>,
              <ListItem
                height={70}
                containerStyle={{ 
                  backgroundColor: Colors.white, 
                  borderWidth: 2, 
                  borderColor: Colors.green30, 
                  borderRadius: 10,
                  marginVertical: 5,
                  marginHorizontal: 10
                }} // 绿色边框 + 圆角
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70 green30>Green Border + Radius</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>
        
        <TestCase itShould="containerElement: 自定义容器元素 (View vs TouchableHighlight)">
          <ListItemTester
            label="Custom Container Element"
            listItems={[
              <ListItem
                // 默认通常是 TouchableOpacity (如果定义了 onPress) 或 View
                // 这里显式传入 View，意味着它不可点击（没有波纹/变色效果）
                containerElement={View}
                height={70}
                containerStyle={[styles.border, {backgroundColor: Colors.grey80}]}
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70 grey10>Wrapped in View (Static)</Text>
                 </ListItem.Part>
              </ListItem>,
              <ListItem
                // 强制使用 TouchableHighlight
                containerElement={(props: any) => <TouchableHighlight {...props} onPress={()=>{addLog('Custom_Highlight')}} underlayColor={Colors.yellow70} />}
                height={70}
                containerStyle={styles.border}
              >
                 <ListItem.Part middle paddingL-20>
                    <Text text70>Wrapped in Custom TouchableHighlight</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
            showLogs={true}
            eventLogs={eventLogs}
          />
        </TestCase>

        <TestCase itShould="testID: 测试标识符">
          <ListItemTester
            label="TestID Assignment"
            listItems={[
              <ListItem
                testID="list_item_A"
                height={60}
                containerStyle={styles.border}
              >
                 <ListItem.Part middle paddingL-20><Text text70>ID: list_item_A</Text></ListItem.Part>
              </ListItem>,
              <ListItem
                testID="list_item_B"
                height={60}
                containerStyle={styles.border}
              >
                 <ListItem.Part middle paddingL-20><Text text70>ID: list_item_B</Text></ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="ListItem.Part: left / middle / right 布局">
          <ListItemTester
            label="Standard Layout (Left - Middle - Right)"
            listItems={[
              <ListItem height={80} containerStyle={styles.border}>
                 <ListItem.Part left containerStyle={{backgroundColor: Colors.red80, padding: 5}}>
                    <Image source={Assets.list_demo.avatar1} style={styles.image} />
                 </ListItem.Part>
                 <ListItem.Part middle containerStyle={{backgroundColor: Colors.blue80, paddingLeft: 10}}>
                    <Text text70>Middle Part (Flex: 1)</Text>
                    <Text text90>Takes remaining space</Text>
                 </ListItem.Part>
                 <ListItem.Part right containerStyle={{backgroundColor: Colors.green80, padding: 10}}>
                    <Text text80>$10.00</Text>
                 </ListItem.Part>
              </ListItem>,
              
              <ListItem height={80} containerStyle={styles.border}>
                 <ListItem.Part left>
                    <View style={{width: 50, height: 50, backgroundColor: Colors.grey50, borderRadius: 25, alignItems:'center', justifyContent:'center'}}>
                      <Text>L</Text>
                    </View>
                 </ListItem.Part>
                 <ListItem.Part middle paddingL-15>
                    <Text text70>No Right Part here</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="ListItem.Part: right (对齐到右侧)">
          <ListItemTester
            label="Right Alignment Demo"
            listItems={[
              <ListItem height={60} containerStyle={styles.border}>
                <ListItem.Part middle paddingL-20>
                   <Text text70>Item Name</Text>
                </ListItem.Part>
                <ListItem.Part right paddingR-20>
                   <Text text70 blue30>Right Aligned</Text>
                </ListItem.Part>
              </ListItem>,
              <ListItem height={60} containerStyle={styles.border}>
                <ListItem.Part left paddingL-20>
                   <Image source={Assets.list_demo.avatar1} style={styles.image} />
                </ListItem.Part>
                <ListItem.Part middle paddingL-10>
                   <Text text70>User Info</Text>
                </ListItem.Part>
                <ListItem.Part right paddingR-20 column>
                   <Text text90 grey40>Details &gt;</Text>
                   <Text text100 red30>Action</Text>
                </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="ListItem.Part: column vs row (内容方向)">
          <ListItemTester
            label="Flex Direction"
            listItems={[
              <ListItem height={90} containerStyle={styles.border}>
                 <ListItem.Part left>
                    <Image source={Assets.list_demo.avatar1} style={styles.image} />
                 </ListItem.Part>
                 
                 <ListItem.Part middle column paddingL-15>
                    <Text text70>Title (Column)</Text>
                    <Text text90 grey40>Subtitle below title</Text>
                    <Text text100 grey50>Description goes here</Text>
                 </ListItem.Part>
              </ListItem>,

              <ListItem height={90} containerStyle={styles.border}>
                 <ListItem.Part left>
                    <Image source={Assets.list_demo.avatar2} style={styles.image} />
                 </ListItem.Part>
                 
                 <ListItem.Part middle row paddingL-15>
                    <Text text70 marginR-10>Title (Row)</Text>
                    <Text text90 grey40>Subtitle next to title</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

        <TestCase itShould="ListItem.Part: containerStyle (局部样式)">
           <ListItemTester
            label="Part Styling"
            listItems={[
              <ListItem height={70} containerStyle={styles.border}>
                 <ListItem.Part middle>
                    <Text>Default Style</Text>
                 </ListItem.Part>
                 <ListItem.Part right containerStyle={{ borderWidth: 1, borderColor: 'red', borderRadius: 4, padding: 4 }}>
                    <Text red10>Bordered Part</Text>
                 </ListItem.Part>
              </ListItem>,
              <ListItem height={70} containerStyle={styles.border}>
                 <ListItem.Part middle containerStyle={{ backgroundColor: Colors.yellow70, justifyContent: 'center', alignItems: 'center', height: '80%', borderRadius: 8 }}>
                    <Text>Centered with Bg</Text>
                 </ListItem.Part>
              </ListItem>
            ]}
          />
        </TestCase>

      </TestSuite>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollContent: {
    paddingBottom: 20,
    backgroundColor: Colors.grey70,
  },
  testerContainer: {
    padding: 15,
    marginBottom: 10,
    backgroundColor: 'transparent',
  },
  sectionTitle: {
    fontWeight: 'bold',
    marginLeft: 5,
  },
  logContainer: {
    backgroundColor: Colors.yellow80,
    padding: 5,
    marginBottom: 10,
    borderRadius: 4,
  },
  listContainer: {
    backgroundColor: Colors.white,
    borderRadius: 8,
    overflow: 'hidden',
    elevation: 2,
  },
  listItemWrapper: {
    padding: 0,
  },
  separator: {
    height: 10,
    backgroundColor: Colors.grey70,
  },
  image: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginLeft: 10,
  },
  imageLarge: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginLeft: 10,
  },
  border: {
    borderBottomWidth: 1,
    borderColor: Colors.grey60,
  },
});